<template>
 <section class="Order_box" @click="noneopacitredxf()">
  <Nav :URL="urls.url" :text="urls.text"></Nav>
  <section class="Order_content">
    <hgroup class="Order_Comm_iofn bg-F Order_bus_info">商品信息</hgroup>
    <hgroup class="Order_Comm_cont bg-F dip ju-al">
        <hgroup class="Order_Comm_fl">
          <img src="../../../static/images/Order/order_img.jpg" alt="">
        </hgroup> 
        <hgroup class="Order_Comm_fr dipW ju_al_lf">
          <h3 class="Comm_fr_title">{{OrderS.commodityName}}</h3>
          <p class="comm_fr_Text">{{OrderS.description}}</p>
          <span class="dip ju_al_lf comm_fr_Number">
            <em class="comm_fr_clr">￥{{OrderS.marketPrice}}</em>
            <i class="comm_fr_money">x{{commifon.money}}</i>
          </span>
        </hgroup>
    </hgroup>
    <hgroup class="order_comm_details bg-F Order_bus_info dip ju_al_lf">
      <span class="details_title">{{details.title}}</span>
      <span class="details_content">{{details.content}}</span>
    </hgroup>
    <hgroup class="order_comm_addt dipW ">
      <span class="addt_title Order_Comm_iofn Order_bus_info bg-F">填写收货信息</span>
      <span class="addt_userName bg-F" :class="{'Inputactive':this.Inputnameactive}">
        <input type="text" class="attr_name bdr attr_clor" placeholder="收货人姓名" @blur.stop="IsName()" @focus.stop="isnamefouse()" v-model="model.name" >
      </span>
      <span class="addt_userName bg-F" :class="{'Inputactive':this.Inputnumberactive}">
        <input type="text" class="attr_name bdr attr_clor" placeholder="联系电话"  @blur.stop="Istnumber()" @focus.stop="istnumberfouse()" v-model="model.number" >
      </span>


      <span class="addt_userName bdr bg-F jud" :class="{'Inputactive':this.Inputattractive}" @click.stop="getPOad()">
        <!-- <input type="text" class="attr_name bdr attr_clor" placeholder="地区信息"  @blur.stop="Isholder()" @focus.stop="isholderfouse()" v-model="model.attr" > -->
        <span class="bdr ju-als">
          <span class="attr_name_lll bdr attr_clor dip ju_al_lf jud_addtr" :class="{'text_color_input':this.inputText}"  v-show="poij" v-text="model.attr == ''? '地区信息' :model.attr " ></span>

          <!-- <v-distpicker @selected="onSelected" :province="province" :city="city" :area="area"  wrapper="customize" class="ju_al_lf dip" v-if="paosd"></v-distpicker> -->
          <v-distpicker type="mobile" @selected="onSelected" :province="province" :city="city" :area="area"  wrapper="customize" class="ju_al_lf dip" v-if="paosd"></v-distpicker>
        </span>
      </span> 


      <span class="addt_userName bg-F" :class="{'Inputactive':this.Inputattrdetailsactive}">
        <input type="text" class="attr_name bdr attr_clor" placeholder="详细地址"  @blur.stop="Isattrdetail()" @focus.stop="isattrdetailfouse()" v-model="model.attrdetails" >
      </span>
    </hgroup>
  </section>
  <footer class="payment_mode dip">
    <div class="mall_ToPay ToPay——bg" @click.stop="addWechet(1)">货到付款</div>        
    <div class="mall_ToPay Asyougo_bg" @click.stop="addWechet(2)">在线支付</div>       
  </footer>
  <!-- 未支付订单 -->
  <div class="orderDetilserror" v-if="this.orderDetilserror">
    <div class="dipW ju_al bdr orderDetilserror_child tftra">
      <span class="ODS_fiast dip ju_al">
        你还有未支付的订单，请前去完成支付
      </span>
      <span class="dip ju_al ODS_last bg_li">
        <em class="ODS_em1" @click.stop="ifadderror()">取消</em>
        <em class="ODS_em2" @click.stop="ifaddsccess()">确定</em>
      </span>
    </div>
  </div>
 </section>
</template>
<script>
import VDistpicker from 'v-distpicker'
import Exif from 'exif-js'
import Nav from './mallTopNav'
import bus from '@/assets/bus/js/bus.js'
export default {
  data(){
    return{
      province:'',
      city:'',
      area:'',
      urls:{
        url:'',
        text:'订单信息',
      },
      commifon:{
        img:'',
        money:'1',
      },
      details:{
        title:"活动信息:",
        content:'2018年期间购买广告机免费赠送一年的海报设计'
      },
      Inputactive:false,
      model:{
        name:'',
        number:'',
        attr:'',
        attrdetails:''
      },
      Inputnameactive:false,
      Inputnumberactive:false,
      Inputattractive:false,
      Inputattrdetailsactive:false,
      OrderS:'',
      Rurtuurl:'',//路由
      orderDetilserror:false, //未支付订单
      poij:true, //显示区域信息
      paosd:false, //三级联动
      inputText:false, //文字颜色

    }
  },
  components:{Nav,VDistpicker},
  methods:{
    IsName(){
      if(this.model.name == '' || !bus.Name().test(this.model.name)){ //判断姓名
        this.Inputnameactive = true;
      } 
    },
    isnamefouse(){
      if(this.model.name == '' || !bus.Name().test(this.model.name)){
        this.Inputnameactive =false;
        // this.model.name = ''
      }
    },
    Istnumber(){
      if(this.model.number == '' || !bus.number().test(this.model.number) || bus.numberS().test(this.model.number)){ //判断手机号
        this.Inputnumberactive = true
      }
    },
    istnumberfouse(){
      if(this.model.number == '' || !bus.number().test(this.model.number) || bus.numberS().test(this.model.number)){
        this.Inputnumberactive = false
        // this.model.number = ''
      }
    },
    // Isholder(){
      //   if(this.model.attr == '' ){ //判断地址
      //     this.Inputattractive=true
      //   }
      // },
      // isholderfouse(){
      //   if(this.model.attr == '' || bus.amount().test(this.model.attr) || bus.English().test(this.model.attr)){
      //     this.Inputattractive=false
      //     this.model.attr = ''        
      //   }
    // },
    Isattrdetail(){
      if(this.model.attrdetails == ''){ //判断详细地址
        this.Inputattrdetailsactive = true
      }
    },
    isattrdetailfouse(){
      if(this.model.attrdetails == ''){
        this.Inputattrdetailsactive = false
        // this.model.attrdetails = ''
      }
    },
    addWechet(numberIao){
      var _this = this;
      var model = _this.model;
      if(model.name == '' || !bus.Name().test(model.name)){
        _this.Inputnameactive = true;
      }else if(model.number == '' || !bus.number().test(model.number) || bus.numberS().test(model.number)){
        _this.Inputnumberactive = true;
      }else if(model.attr == '' || bus.amount().test(model.attr) || bus.English().test(model.attr)){
        _this.Inputattractive = true
      }else if(model.attrdetails == ''){
        _this.Inputattrdetailsactive = true
      }else{
        if(Number(numberIao) == 2){
          this.$store.dispatch('showloader')           
          var usernameIfon = { //传入信息
            "contacts":model.name,
            "contactsPhone":model.number,
            "address":model.attr + model.attrdetails,
            "commodityId":_this.OrderS.id,
            "paymentMode":null,
            "deliveryMethod":null,
            "deliveryTime":null
          }
          this.axios.post(this.$busPoat.create(),usernameIfon).then(response=>{
              var st;
              clearTimeout(st)
              st = setTimeout(() =>{
                if(response != null || response != undefined){
                  this.$store.dispatch('hideloader')                  
                  sessionStorage.setItem('orderDetails',JSON.stringify(response))  //这是详情
                  // console.log(JSON.parse(sessionStorage.getItem('orderDetails')))
                  if(response.data.iplancode == 200){
                    this.$router.push({path:'/bomNav/'+this.Rurtuurl+'/Order/OrderDetails/'+numberIao+''})              
                  }else if(response.data.iplancode == 106){
                    this.orderDetilserror = true                                
                  }
                }else{
                  this.$store.dispatch('hideloader')                  
                  alert('请求加载过慢...')
                }
                  clearTimeout(st)                                                                       
              },2000)
            }).catch(error=>{
               this.$store.dispatch('hideloader')
              alert('支付失败')
            }) 
        }else if(Number(numberIao) == 1){
          let usernameIfoncontacts = {
            "contacts":model.name,
            "contactsPhone":model.number,
            "address":model.attr + model.attrdetails,
            "commodityId":_this.OrderS.id,
            "objmoney":this.OrderS.marketPrice
          }
          sessionStorage.setItem('usernameIfoncontacts',JSON.stringify(usernameIfoncontacts))
          // console.log(JSON.parse(sessionStorage.getItem('usernameIfoncontacts')))
          this.$router.push({path:'/bomNav/'+this.Rurtuurl+'/Order/OrderDetails/'+numberIao+''}) 
          
        }
        model.name = ''
        model.number = ''
        model.attr = ''
        model.attrdetails = ''
      }
    },
    ifadderror(){
      this.orderDetilserror = false
    },
    ifaddsccess(){
      // let id = sessionStorage.getItem('id') == null || sessionStorage.getItem('id') == undefined ? 1 : sessionStorage.getItem('id')
      // let pay = sessionStorage.getItem('pay') == null || sessionStorage.getItem('pay') == undefined ? 2 : sessionStorage.getItem('pay')
      let id =  1 
      let pay =  2 
      // console.log(id,pay)
      this.$router.push({path:'/bomNav/'+id+'/Order/OrderDetails/'+pay+''})  
    },
    getPOad(){ //点击区域
      this.poij = false
      this.paosd = true
    },
    noneopacitredxf(){
      this.poij = true;    
      this.paosd = false;
    },
    onSelected(data) { //三级联动返回值
      console.log(data)
      this.model.attr = data.province.value + data.city.value + data.area.value ;
      this.poij = true;    
      this.paosd = false;
      this.inputText = true
      this.userMoneyActive = true
      this.Inputattractive = false
    },
  }
  ,created(){
    this.Rurtuurl = this.$route.params.luyouL;  //路由回去上一级的
    this.urls.url ='/bomNav/details/'+this.Rurtuurl;
    if(this.Rurtuurl ==1){
      this.OrderS = JSON.parse(sessionStorage.getItem('details1'))
    }else if(this.Rurtuurl ==2){
      this.OrderS = JSON.parse(sessionStorage.getItem('details2'))
    }
    // console.log(this.OrderS)
  }
}
</script>
<style lang="scss">
.distpicker-address-wrapper{
  z-index: 20 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  font-size: .28rem !important;
  color:#000 !important ;
  position: absolute !important;
  top:0% !important;
  left:0% !important;
  background: transparent !important;
  .address-header{
    height: 100%;
    width: 100%;
    padding:0rem;
    color:#000 !important;
    background: transparent !important;
    ul{
      width: 100%;
      padding:0rem;
      height: 100%;
      display:flex;
      justify-content: center;
      align-items: center;
      color:#000 !important;     
      li{
        padding: 0rem 2%;
        border:0 !important;
        color:#000 !important;     
      }
    }
  }
  .address-container{
    height: 3rem !important;
    width: 100% !important;
    padding:0rem !important;
    position: absolute !important;
    left:0rem !important;
    top:-3rem !important;
    ul{
      width: 100%!important;
      height: 100% !important;
      li{
        border:0 !important;
        padding:.25rem 0rem !important;
        width: 100% !important;
        text-align: center !important;
        font-size: .28rem !important;
        border-bottom:.02rem solid #f2f2f2 !important;
      }
    }
  }
  select{
    padding:0rem .05rem !important;
    height: 100% !important;
    border:0rem !important;
    border-radius:0rem !important;
    font-size:.28rem !important;
    color:#000 !important;
    appearance:none !important;
    width: 32% !important;    
    -moz-appearance:none !important;
    -webkit-appearance:none !important;
    background: transparent !important;
    &:nth-child(1){
      width: 34% !important;
    }
    option {
      // direction: ltr;
      width: 100%;
      color:#000 !important;
      // text-align:center;
    }
  }
  select::-ms-expand { display: none; }
}
.distpicker-address-wrapper .address-container{
  width: 100% !important;
}
.distpicker-address-wrapper .address-header ul li{
  color:#000 !important;
}
.distpicker-address-wrapper .address-header ul li.active{
  color:#000 !important;
}

</style>
<style lang="scss" scoped>
.Order_box{
  margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #fff;
  position: relative;
}
.bg-F{
  background: #fff;
  width: 100%;
  padding:0rem .4rem;
}
.Order_bus_info{
  text-align: left;
  line-height: .8rem;
  font-weight: 600;
  height: 0.8rem;
}
.Order_content{
  width: 100%;
  height: 100%;
  margin:.8rem 0rem 1.2rem 0rem;
  .Order_Comm_iofn{
    font-size: .3rem;
    color:#333;
    border-bottom: .01rem #DEDEDE solid; 
  }
  .Order_Comm_cont{
    height:2.6rem;
    border-bottom:.2rem solid #f2f2f2;
    padding-top:.2rem;
    padding-bottom:.2rem;
      .Order_Comm_fl{
        width: 45%;
        height: 100%;
        img{
          width: 2.3rem;
          height: 2rem;
        }
      }
      .Order_Comm_fr{
        height: 100%;
        width: 55%;
        .Comm_fr_title{
          color:#333;
          font-size: .28rem;
          width: 100%;
          height: 18%;
          font-weight: 600;
        }
        .comm_fr_Text{
          font-size:.2rem;
          color:#999;
          height: 50%;
          width: 100%;
          line-height: .32rem;
          font-weight: 550;
        }
        .comm_fr_Number{
          height: 32%;
          width: 100%;
          .comm_fr_clr{
            font-size: .28rem;
            color:#FF7200;
            font-weight: 500;
            margin-right:.4rem;
          }
          .comm_fr_money{
            font-size:.24rem;
            color:#999;
          }
        }
      }
  }
  .order_comm_details{
    border-bottom:.2rem solid #f2f2f2;
    font-size: .2rem;
    height: 1rem;
    .details_title{
      color:#333;
      font-weight: 600;
      height: 100%;
      letter-spacing:.03rem;
    }
    .details_content{
      color:#ff7200;
      height: 100%;
      font-weight: 600;
      font-size: .22rem;
    }
  }
  .order_comm_addt{
    width: 100%;
    height: 5.64rem;
    .addt_title{
      width: 100%;
    }
    .addt_userName{
      // margin-top:.2rem;
      height: 0.8rem;
      .attr_name{
        background: #F2F2F2;
        height: 0.8rem;
        width: 100%;
        padding-left:.2rem;
        // color: #999;
        // color:#666;
        color:#171616;
        font-size: .24rem; 
        font-weight: 500; 
      }
      .attr_name_lll{
        background: #F2F2F2;
        height: 0.8rem;
        width: 100%;
        padding-left:.2rem;
        color: #999;
        font-size: .24rem; 
        font-weight: 500; 
      }
      input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
        color: #999;
        font-size: .24rem;
        font-weight: 500; 
      } 
      input:-moz-placeholder, textarea:-moz-placeholder { 
        color: #999;
        font-size: .24rem;
        font-weight: 500; 
      } 
      input::-moz-placeholder, textarea::-moz-placeholder { 
        color: #999;
        font-size: .24rem;
        font-weight: 500; 
      } 
      input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
        color: #999;
        font-size: .24rem;
        font-weight: 500; 
      } 
    }
  }
}
.Order_mode{
  width: 100%;
  height: 1rem;
  position: fixed;
  bottom:0rem;
  z-index: 51;
  .Order_mode_posi{
    position: absolute;
    width: 100%;
    height: .5rem;
    top:-60%;
    bottom:0;
    left:0;
    right:0;
    background: rgba(209, 66, 66,.6);
    text-align:center;
    color:#fff;
    font-size: .24rem;
    font-weight: 600;
    line-height: .5rem;
  }
  button{
    font-size: .36rem;
    color:#fff;
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 1rem;
  }
  .Order_else{
    -webkit-border-top-left-radius:.1rem;
       -moz-border-radius-topleft:.1rem;
            border-top-left-radius:.1rem;
    -webkit-border-bottom-left-radius:.1rem;
       -moz-border-radius-bottomleft:.1rem;
            border-bottom-left-radius:.1rem;  
  }
  .Order_ToPay{
    background: #26AB28;
    -webkit-border-top-left-radius:.1rem;
       -moz-border-radius-topleft:.1rem;
            border-top-left-radius:.1rem;
    -webkit-border-bottom-left-radius:.1rem;
       -moz-border-radius-bottomleft:.1rem;
            border-bottom-left-radius:.1rem;    
  }
  .yu_e{
    background: #7b7a80;
    -webkit-border-top-right-radius:.1rem;
        -moz-border-radius-topright:.1rem;
            border-top-right-radius:.1rem;
    -webkit-border-bottom-right-radius:.1rem;
        -moz-border-radius-bottomright:.1rem;
            border-bottom-right-radius:.1rem;
  }
}
.Inputactive{
  .attr_clor{
    border:.02rem solid #FF7200 !important;
    color:#FF7200 !important;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color: #ff7200 !important;
  } 
  input:-moz-placeholder, textarea:-moz-placeholder { 
    color: #ff7200 !important;
  } 
  input::-moz-placeholder, textarea::-moz-placeholder { 
    color: #ff7200 !important;
  } 
  input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color: #ff7200 !important;
  } 
}
.payment_mode{
  width: 100%;
  height: 0.98rem;
  background: #fff;
  justify-content:space-around;
  align-items: center;
  position: fixed;
  bottom:0;
  z-index: 51;
  .mall_ToPay{
    width: 50%;
    // position: relative;
    font-size:.3rem;
    height: 100%;
    line-height: 0.98rem;
    text-align: center;
    color:#fff; 
  }
  .ToPay——bg{
    background: #ABABAB ;
  }
  .ToPay——bg::before,.Asyougo_bg::after{
    content:"";
    width:0;
    height:0;
    position:absolute;
  }
  // .ToPay——bg::before{
  //   left:35.5%;
  //   top:0%;
  //   border:solid .98rem transparent;
  //   border-right:solid .26rem #FF7200;       /* 黑色大三角形 */
  //   border-top:solid .98rem transparent;
  // }
  .Asyougo_bg::after{
    left:50%;
    top:0%;
    border-top:solid 0rem transparent;
    border-left:solid .26rem #ABABAB;       /* 黑色大三角形 */
    border-bottom:solid .98rem transparent
  }
  .Asyougo_bg{
    background: #FF7200;
  }
}
.orderDetilserror{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: rgba(0,0,0,.4);
  z-index: 60;
  .orderDetilserror_child{
		border:0;
    width: 70%;
    // height: 22%;
    background: rgba(255,255,255,1);
    position: relative;
    top:50%;
    left:50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
    span{
			width: 100%;
      font-size: .28rem;
      color:#666666;
			text-align: center;
			font-family: 'MicrosoftYaHei';
    }
    .ODS_fiast{
      height: 1.8rem;
      padding:9% 25%;
			// line-height: .4rem;
			font-weight: 600;
    }
    .ODS_last{
      // background-image: url('../../../static/images/Order/order_yue_img.png');
      // background-repeat: no-repeat;
      // background-size: 100%;
			// height: .8rem;
      border:0;
      padding:5% 0rem;
      em{
        width: 50%;
        height: 100%;
				font-weight: 600;
				color:#FFFFFF;
				// background: #ff6f00;
        // line-height: .8rem;
      }
      .ODS_em2{
				border-left:.02rem solid #FF7200;
      }
    }
  }
}
.jud{
  position: relative;
  width: 100%;
  display: block;
  .ju-als{
    // position: absolute;
   position: relative;
    width: 100%;
    height: .8rem ;
    display: block;
    padding:0rem;
    // padding:0rem .4rem;
    top:0rem;
    left:0;
    background: #F2F2F2;
  }
  .jud_addtr{
    color: #999;
    font-size: .24rem;
    font-weight: 600; 
   
  }
  .text_color_input{
    color: #171616 !important;
    font-size: .24rem!important;
    font-weight: 500 !important; 
  }
 

}
</style>
